<template>
	<div>
		<div class="type">
			<transition name="opacity">
				<div class="type-mask" v-show="dialog"></div>				
			</transition>
			<transition name="slideup">
				<div class="type-content"  v-if="dialog">
					<div class="type-header">
						<div @click="confirm">确定</div>
						<div @click="hide">取消</div>
					</div>
					<div class="content">
						<div class="nav">
							<div v-for="(item,index) in navs" :class="{'active': item != ''}">{{item}}</div>
						</div>
						<div class="body">
							<div class="left" style="height: 240px;">
								<div :class="{'item': true, 'active': show == true}" @click="all">
									全部
								</div>
								<div :class="{'item': true, 'active': index == navIndex}" v-for="(item, index) in list" @click="items(item,index)">
									{{item.classifyName}}
								</div>
							</div>
							<div class="right" style="height: 240px;">
								<div :class="{'item':true, 'active': index == navIndex1}" v-for="(item, index) in newList" @click="success(item,index)">
									{{item.classifyName}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			dialog: {
				type: Boolean,
				default: false
			},
			list: {
				type: [ Array,Object ],
				default: []
			},
			newList: {
				type: [ Array,Object ],
				default: []
			}
		},
		data() {
			return {
				navs: ['请选择',''],
				data: [],
				navIndex: null,
				navIndex1: null,
				show: false
			}
		},
		methods: {
			hide() {
				this.$emit('hide')
			},
			confirm() {
				this.$emit('success', this.data)
				this.hide();
			},
			all() {
				this.show = !this.show
				this.navIndex = null;
				this.navIndex1 = null;
				this.data = []
			},
			items(item,index) {
				this.show = false;
				this.navs[0] = item.classifyName;
				this.navs[1] = '请选择';
				this.navIndex = index;
				this.data = [];
				this.navIndex1 = null;
				this.data.push(item)
				this.$emit('items',item)
			},
			success(item,index) {
				this.navs[1] = item.classifyName;
				this.navIndex1 = index;
				this.data.push(item);
			}
		}
	}
</script>

<style lang="less" scoped>
	.slideup-enter-active{
        animation-name: slideInUp;
        animation-duration: .2s;
        animation-fill-mode: both
    }
    .slideup-leave-active {
        animation-name: slideOutDown;
        animation-duration: .5s;
        animation-fill-mode: both
    }
    @keyframes slideInUp {
        0% {
            transform: translate3d(0,100%,0);
            visibility: visible
        }

        to {
            transform: translateZ(0)
        }
    }
    @keyframes slideOutDown {
        0% {
            transform: translateZ(0)
        }

        to {
            visibility: hidden;
            transform: translate3d(0,100%,0)
        }
    }
	
	.opacity-enter .opacity-leave-to{
		opacity: 0;
		z-index: 2!important;
	}
	
	.opacity-enter-active .opacity-leave-active{
		transition: opacity 5s;
	}
	
	.type {
		
		.type-mask {
			z-index: 1000;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,.5);
			width: 100%;
			height: 100%;
		}
		
		.type-content {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 50%;
			background: #fff;
			z-index: 1001;
			
			.type-header {
				display: flex;
				font-size: 14px;
				justify-content: space-between;
				padding: 8px 10px;
				box-shadow: 0px 0 5px #7B7B7B;
			}
			
			.content {
				
				.nav {
					display: flex;
					align-items: center;
					justify-content: center;
					
					div {
						flex: 1;
						padding: 6px 0;
						text-align: center;
						
						/*&:first-child {
							border-right: 1px solid #c9eb59;
						}*/
					}
					
					.active {
						/*color: #c9eb59;*/
						border-bottom: 1px solid #c9eb59;
					}
				}
				
				.body {
					display: flex;
					padding-top: 5px;
					overflow: hidden;
					
					.left {
						overflow-y: scroll;
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						
						.item {
							padding: 5px 15px;
						}
						
						.active {
							background: #c9eb59;
							color: #fff;
						}
					}
					
					.right {
						flex: 1;
						overflow-y: scroll;
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						height: 100px;
						
						.item {
							padding: 5px 15px;
						}
						
						.active {
							background: #c9eb59;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>